<template>
  <div class="order-list">
    <template v-if="hasResult">
      <div class="order-item" v-for="(item, index) in orderList">
        <div class="order-header" @click="toGoodsInfo(item.goods_id, item.order_id)">
          <span class="o-name">{{item.goods_name}}</span>
          <span class="o-date">{{item.order_add_date}}</span>
        </div>
        <div class="order-content" @click="toGoodsInfo(item.goods_id, item.order_id)">
          <div class="desc-wrap clearfix">
            <div class="o-cover">
              <img :src="item.goods_img" alt="">
            </div>
            <div class="o-desc">
              <div class="type">{{item.goods_type}}</div>
              <div class="price">￥{{item.price}} <span class="number">×{{item.num}}</span> </div>
            </div>
          </div>
          <div class="sum-wrap">
            共{{item.num}}件商品&nbsp;合计：<span class="sum-price">￥{{item.num * item.price}}</span>
          </div>
        </div>
        <div class="order-footer">
          <div class="delete" @click="deleteOrder(item, index)">删除</div>
          <div class="review" @click="review(item)">评价</div>
          <a href="tel:400-6011109">联系客服</a>
        </div>
      </div>
    </template>
    <no-result text="订单" imgUrl="/static/images/no-order.png" v-else></no-result>
    <load :loadEvent="getOrderList"></load>

    <div v-transfer-dom>
      <popup v-model="reviewPage" height="100%" style="background: #f4f6f8;">
        <x-header 
          title="评价"
          :left-options="{
            backText: '',
            preventGoBack: true
          }"
          @on-click-back="reviewPage = false">
        </x-header>
        <div class="reviewPage">
          <div class="r-header">
            <img :src="currentItem.goods_img" alt="">
            <span class="name">{{currentItem.goods_name}}</span>
          </div>
          <div class="score">
            <h5>快点给我评价吧</h5>
            <rater v-model="score" :font-size="32"></rater>
          </div>
          <div class="review-box">
            <textarea class="content" v-model="releaseContent">
            </textarea>
            <div class="tip">写下你的评价吧，晒好评，得积分</div>
<!--             <uploader 
              :max="3"
              :images="upImgs"
              upload-url="/api/goods/uploadCommentPic"
              :show-header="false"
            ></uploader> -->
  <!--           <upload class="upload-img"
              ref="upload"
              :default-list="oldImgs"
              :isClear="clearImg"
              action="/goods/uploadCommentPic">
              <div class="click-add-img">
                <div class="add-text"><span class="add-plus">+</span></div>
              </div>
            </upload> -->
          </div>
          <button class="wx-btn" :class="{active: score > 0}" @click="release">发布评价</button>
        </div>
      </popup>
    </div>

  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'
  import load from 'COMPS/load.vue'
  import noResult from 'COMPS/no-result.vue'
  import { TransferDom, Popup, XNumber, XButton, Rater, ToastPlugin, XHeader } from 'vux'
  Vue.use(ToastPlugin)

  export default {
    name: 'order-list',
    data: function() {
      return {
        orderList: [],
        reviewPage: false,
        hasResult: true,
        currentItem: {},
        score: 0,
        releaseContent: "质量好，包装好，下次还会再买"
      }
    },
    directives: {
      TransferDom
    },
    components: {
      load,
      noResult,
      Popup,
      XNumber,
      XButton,
      Rater,
      XHeader
    },
    mounted() {
      this.getOrderList();
    },
    methods: {
      review(item) {
        this.currentItem = item;
        this.reviewPage = true;
      },
      release() {
        if(this.score < 1) {
          return false;
        }

        if (window.DEBUGGING) {
          this.$vux.toast.text('发布成功', 'middle');
        }

        let that = this;
        axios.post('/goods/addComment',{
          order_id: that.currentItem.order_id,
          goods_id: that.currentItem.goods_id,
          content: that.releaseContent,
          stars: that.score,
          // imgs: that.oldImgs 
        }).then((res) => {
          if(res.msg == 'success') {
            that.$vux.toast.text('发布成功', 'middle');
            this.reviewPage = false;
          }
        })
      },
      deleteOrder(item, index) {
        let that = this;
        axios.post('/order/deleteOrder', {
          order_id: item.order_id
        }).then((res) => {
          if (res.code = 200) {
            that.orderList.splice(index , 1)
          }
        })
      },
      getOrderList() {
        let that = this;

        let param = {}
        if(that.orderList.length < 1) {
          param = {}
        } else {
          param.uptime = new Date(that.orderList[that.orderList.length - 1].add_time).getTime();
          param.order_info_id = that.orderList[that.orderList.length - 1].order_info_id
        }

        if(window.DEBUGGING) {
          return new Promise (function(resolve) {
            setTimeout(() => {
              resolve([{
                "comment_num": 0,
                "goods_name": "1232",
                "formal_price": "100.00",
                "order_info_id": 109,
                "num": 3,
                "goods_cate": "58hrt",
                "goods_id": 1,
                "goods_sn": "SN_1232",
                "goods_sell_num": 0,
                "user_id": 74,
                "price": "31.00",
                "order_add_date": "2018-09-28 16:22",
                "goods_type": "电池供应商",
                "describe": "123",
                "stock": 99,
                "order_id": 17,
                "add_time": 1538122939,
                "goods_img": "http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg"
              },{
                "comment_num": 0,
                "goods_name": "1232",
                "formal_price": "100.00",
                "order_info_id": 109,
                "num": 3,
                "goods_cate": "58hrt",
                "goods_id": 1,
                "goods_sn": "SN_1232",
                "goods_sell_num": 0,
                "user_id": 74,
                "price": "31.00",
                "order_add_date": "2018-09-28 16:22",
                "goods_type": "电池供应商",
                "describe": "123",
                "stock": 99,
                "order_id": 17,
                "add_time": 1538122939,
                "goods_img": "http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg"
              },{
                "comment_num": 0,
                "goods_name": "1232",
                "formal_price": "100.00",
                "order_info_id": 109,
                "num": 3,
                "goods_cate": "58hrt",
                "goods_id": 1,
                "goods_sn": "SN_1232",
                "goods_sell_num": 0,
                "user_id": 74,
                "price": "31.00",
                "order_add_date": "2018-09-28 16:22",
                "goods_type": "电池供应商",
                "describe": "123",
                "stock": 99,
                "order_id": 17,
                "add_time": 1538122939,
                "goods_img": "http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg"
              },{
                "comment_num": 0,
                "goods_name": "1232",
                "formal_price": "100.00",
                "order_info_id": 109,
                "num": 3,
                "goods_cate": "58hrt",
                "goods_id": 1,
                "goods_sn": "SN_1232",
                "goods_sell_num": 0,
                "user_id": 74,
                "price": "31.00",
                "order_add_date": "2018-09-28 16:22",
                "goods_type": "电池供应商",
                "describe": "123",
                "stock": 99,
                "order_id": 17,
                "add_time": 1538122939,
                "goods_img": "http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg"
              }])
            },1000)
            
          }).then(function(data) {
            that.orderList = data;
            if(that.orderList.length < 1) {
              that.hasResult = false;
            }
          })
        }
        
        // let param = {}
        // if(that.orderList.length < 1) {
        //   param = {}
        // } else {
        //   param.uptime = new Date(that.orderList[that.orderList.length - 1].order_add_date).getTime();
        //   param.order_info_id = that.orderList[that.orderList.length - 1].order_id
        // }

        return axios.get('/order/orderList',{
          params: param
        }).then((res) => {
          that.orderList = that.orderList.concat(res.data);
          if(that.orderList.length < 1) {
            that.hasResult = false;
          }
        })
      },
      toGoodsInfo(id, orderId) {
        location.href = "/goodsInfo.html?id=" + id + "&order_id=" + orderId
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';
  body{margin:0;padding:0;}
  .order-list {
    font-size: 12px;
    color: #333;
    .order-item {
      background-color: #fff;
      .order-header {
        line-height: 44px;
        padding-left: 22px;
        padding-right: 15px;
        border-bottom: 1px solid #f4f6f8;
        .o-date {
          float: right;
          color: #999;
        }
      }
      .order-content {
        padding: 0 24px 16px 18px;
        border-bottom: 1px solid #f4f6f8;
        .desc-wrap {
          padding-top: 16px;
          padding-bottom: 20px;
          .o-cover {
            float: left;
            height: 70px;
            >img {
              margin-right: 10px;
              width: 70px;
              height: 70px;
            }
          }
          .o-desc {
            .type {   
              font-size: 16px;
              font-weight: bold;
              line-height: 22px;
              height: 22*2px;
            }
            .price {
              line-height: 25px;
              font-size: 16px;
              color: #ff3939;
              .number {
                float: right;
                font-size: 14px;
                color: #999;
              }
            }
          }
        }
        .sum-wrap {
          text-align: right;
          font-size: 12px;
          .sum-price {
            color: #ff3939;
          }
        }
      }
      .order-footer {
        padding: 10px 18px 10px 0;
        text-align: right;
        >a,
        .delete,
        .review {
          display: inline-block;
          text-align: center;
          margin-left: 5px;
          width: 72px;
          line-height: 22px;
          border: 1px solid rgba(153, 153, 153, 0.5);
          border-radius: 100px;
        }
      }
    }
  }


  .reviewPage {
    color: #333;
    padding: 15px;
    background-color: #fff;
    .r-header {
      >img {
        vertical-align: middle;
        margin-right: 10px;
        height: 32px;
        width: 32px;
      }
      .name {
        font-size: 16px;
        vertical-align: middle;
      }
    }
    .score {
      margin-bottom: 20px;
      text-align: center;
      >h5 {
        font-weight: normal;
        font-size: 16px;
        margin-top: 30px;
        margin-bottom: 15px;
      }
    }
    .review-box {
      position: relative;
      width: 100%;
      background: #F5F5F5;
      border-radius: 5px;
      overflow: hidden;
      .upload-img {
        // margin-top: 15px;
        margin-left: 13px;
        margin-bottom: 13px;
        .ivu-upload-list {
          display: none;
        }
      }
      .click-add-img {
        box-sizing: border-box;
        cursor: pointer;
        text-align: center;
        width: 72px;
        height: 72px;
        color: #666;
        border: solid 1px #dcdcdc;
        background: #F9F9F9;
        .add-text {
          >span{vertical-align: middle;}
          .add-plus {
            font-size: 36px;
            line-height: 72px;
          }
        }
      }
      .weui-cell {
        padding: 0px;
        padding-left: 15px;
      }
      .tip {
        position: absolute;
        bottom: 10px;
        right: 12px;
        font-size: 12px;
        color: #AAAAAA;
      }
      .content {
        box-sizing: border-box;
        resize:none;
        border: none;
        outline: none;
        width: 100%;
        min-height: 200px;
        padding: 15px;
        background-color: #f5f5f5;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        overflow: hidden;
      }
    }
    // .release {
    //   box-sizing: border-box;
    //   border: none;
    //   outline: none;
    //   width: 100%;
    //   margin-top: 30px;
    //   line-height: 44px;
    //   font-size: 16px;
    //   border-radius: 5px;
    //   color: #fff;
    //   background: #9B9B9B;
    //   &.active {
    //     background: #039D4C;
    //   }
    // }
  }
</style>